<template>
	<view class="personal-meal">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->
		
		<!-- 列表 -->
		<view v-for="(item, index) in meal" :key="index" class="meal">
			<!-- <view class="xian-gray16"></view> -->
			<view class="body">
				<image :src="item.imageUrl" mode=""></image>
				<view class="title">[{{item.name}}]</view>
				<view class="cont">{{item.description}}</view>
				<view class="price">
					¥ {{item.price}} 
					<!-- <text>（比总单价优惠 ¥180）</text> -->
				</view>
				<view class="item clearfix" v-for="(item1, index1) in item.packageItemVoList" :key="index1+'a'">
					<view class="fl">
						<view class="tit">{{item1.business.name}}<text>（剩余{{item1.packageConsumeVo.remainTimes}}次）</text></view>
						<view>{{item1.business.description}}</view>
					</view>
					<view v-if="item1.packageConsumeVo.remainTimes>0" class="fr bg-color" @click="toOrder(index, index1)">去使用</view>
					<view v-else class="fr">已使用</view>
				</view>
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	computed: mapState(['hasLogin', 'uerInfo']),
	components: {
		PublicHeader
	},
	data() {
		return {
			title: '我的套餐',
			meal:[]
		};
	},
	onShow(){
		var _this = this
		_this.$http.get('/package/getpacakgelist/'+this.uerInfo.userId).
		then(function (response) {
			_this.meal = response.data
		}).catch(function (error) {
			console.log(error);
		});	
	},
	methods: {
		toOrder(index, index1) {
			let query = {
				businessId: this.meal[index].packageItemVoList[index1].businessId,
				couponity: this.meal[index].packageItemVoList[index1].couponity,
				id: this.meal[index].packageItemVoList[index1].id,
				packageId: this.meal[index].packageItemVoList[index1].packageId,
				packageVo: this.meal[index].packageItemVoList[index1].packageVo,
				name: this.meal[index].packageItemVoList[index1].name,
				price: this.meal[index].packageItemVoList[index1].price,
				univalence: this.meal[index].packageItemVoList[index1].business.univalence,
				univalenceUnit: this.meal[index].packageItemVoList[index1].business.univalenceUnit,
				shopId: this.meal[index].enterpriseId
			}
			uni.setStorage({
				key: 'orderMeal',
				data: {
					enterpriseId: '',
					name: '',
					id: '',
					userId: ''
				}
			})
			uni.navigateTo({
			    url: '/pageageA/pages/order/order-meal?query=' + JSON.stringify(query)
			})
		}
	}
};
</script>

<style scoped lang="scss">
	.body{
		margin-top: 20rpx;
		width: 91.48%;
		margin-left: 4.26%;
	}
	.meal{
		border-top: 16rpx solid #F8F8F8;
	}
	.meal image{
		width: 100%;
		height: 246rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}
	.meal .title{
		font-size: 32rpx;
		color: #333;
	}
	.meal .cont{
		font-size: 26rpx;
		color: #666;
		line-height: 38rpx;
		margin-bottom: 16rpx;
	}
	.meal .price{
		font-size: 32rpx;
		line-height: 45rpx;
		color: #FF3428;
		padding-bottom: 26rpx;
		border-bottom: 1rpx solid #DFDFDF;
	}
	.meal .price text{
		color: #666;
	}
	.meal .item{
		color: #666;
		font-size: 26rpx;
		line-height: 38rpx;
		padding: 30rpx 0;
		overflow: hidden;
	}
	.meal .item .tit{
		color: #333;
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 4rpx;
	}
	.meal .item .tit text{
		color: #FF3428;
	}
	.meal .item .fr{
		width:132rpx;
		height:66rpx;
		line-height: 66rpx;
		text-align: center;
		background:#E3E3E3;
		border-radius:10rpx;
		font-size: 28rpx;
		color: #fff;
		margin-top: 6rpx;
	}
	.bg-color{
		background-color: $uni-color1 !important;
	}
</style>
